<!--
@license
(C) Copyright Nuxeo Corp. (http://nuxeo.com/)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
  <head>
    <title>nuxeo-page-provider demo</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
    <script src="/components/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  </head>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      background-color: #e5e5e5;
      font-family: 'RobotoDraft', sans-serif;
    }

    .container {
      width: 80%;
      margin: 50px auto;
    }

    .card {
      display: block;
      position: relative;
      background-color: white;
      padding: 10px;
      margin-bottom: 20px;
      width: 100%;
    }

    .card h3 {
      margin: 0;
      font-weight: 300;
    }

    .card img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin: 10px;
    }
  </style>

  <body>
    <dom-bind>
      <template>
        <nuxeo-connection
          id="nx"
          url="http://localhost:8080/nuxeo"
          username="Administrator"
          password="Administrator"
        ></nuxeo-connection>
        <nuxeo-page-provider
          auto
          page-size="5"
          current-page="{{docs}}"
          query="[[query(docType)]]"
        ></nuxeo-page-provider>
        <nuxeo-page-provider
          auto
          page-size="5"
          offset="2"
          current-page="{{docsWithOffset}}"
          query="[[query(docType)]]"
        ></nuxeo-page-provider>
        <div class="container" class="layout vertical center">
          <select flex two value="{{docType::change}}">
            <option value="Note">Notes</option>
            <option value="File">Files</option>
          </select>

          <hr />
          <h2>First five results</h2>
          <template is="dom-repeat" items="{{docs}}">
            <div class="card layout horizontal center">
              <h3>[[item.title]]</h3>
            </div>
          </template>
          <h2>First five results with an offset of 2</h2>
          <template is="dom-repeat" items="{{docsWithOffset}}">
            <div class="card layout horizontal center">
              <h3>[[item.title]]</h3>
            </div>
          </template>
        </div>
      </template>
    </dom-bind>

    <script type="module">
      import '@polymer/polymer/polymer-legacy.js';
      import '../nuxeo-connection.js';
      import '../nuxeo-page-provider.js';

      const app = document.querySelector('dom-bind');
      app.query = (docType) => `select * from ${docType} where ecm:isTrashed = 0`;
      app.docType = 'File';
    </script>
  </body>
</html>
